<template>
	<view>
		<view class="races df-y">
			<!-- 导航栏 -->
			<view class="head_box" :style="{ background: bgcolor }">
				<cu-custom :backUrl="backUrl" backColor="#f0f0f0" :isBack="true" :showBackIcon="true">
					<block slot="backText">
						<text class="nav-title shopro-selector-rect">每日竞速赛</text>
					</block>
				</cu-custom>
			</view>
			<view class="scroll_wrap">
				<scroll-view @refresherrefresh="refresh" :refresher-triggered="isRefreshing" :refresher-enabled="true"
					scroll-y="true" scroll-with-animation enable-back-to-top>
					<view class="bs">
						<!-- 导航栏背景 -->
						<view :style="{top:(-1*customBar)+'px'}" class="nav-bg bg-cover df-y ai">
							<image style="width: 508rpx;margin-top:220rpx;" :src="temImgUrl+'/jsbt.png'"
								mode="widthFix"></image>
							<view v-if="!gameStatus" class="nav-text df-yc">
								<view class="text1 fb">请选择竞速目标组</view>
								<view class="text2 bg-cover mt10 fs26 df-c">质押需扣除对应贡献值，获胜队伍奖励翻倍</view>
								<view style="color: #E3AB6E;" class="mt10 df-c text3 fs24">当前贡献值:{{totalValue}}</view>
							</view>
						</view>
						<not-join @totalValue='setTotal' :status='gameStatus' v-if="!gameStatus"></not-join>
						<view style="margin-top: -268rpx;">
							<already-race @showMask='showMask' @totalValue='setTotal' :status='gameStatus'
								v-if="gameStatus"></already-race>
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 加入战队弹窗 -->
			<view v-if="false" class="vwh" style="position: absolute;left: 0;top: 0;">
				<join-notice @joinSuccess="joinSuccess"></join-notice>
			</view>
			<!-- 竞赛结果 -->
			<resulte v-if="resultPop&&result_pop" :resulteData="resulteData"></resulte>
			<u-popup v-model="show" mode="center" border-radius="20">
				<view style="width: 630rpx;height: 349rpx;">
					<join-notice :joinText="joinText" :joinSuccess="joinSuccess"></join-notice>
				</view>
			</u-popup>

		</view>
		<!-- 登录 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
	import notJoin from './components/notJoin.vue'
	import alreadyRace from './components/alreadyRace.vue'
	import joinNotice from "./components/join-notice.vue"
	import resulte from "./components/resulte.vue"
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';

	export default {
		components: {
			notJoin,
			alreadyRace,
			joinNotice,
			resulte,
		},
		data() {
			return {
				bgcolor: "#622128",
				temImgUrl: this.$IMG_URL_TEMP,
				dayGameStatus: false,
				isRefreshing: false,
				totalValue: 0,
				mask: false,
				team_id: "",
				daygame_stage: "",
				backUrl: "",
				resulteData: {},
				resultPop: false,
				show: false,
				joinText:"",
				joinSuccess:false
			}
		},
		methods: {
			...mapActions(['getDayGameStatus', 'joinTeam']),
			async refresh() {
				let that = this
				let res = await this.getDayGameStatus()
				if (res != 0) {
					if (!this.isRefreshing) {
						this.isRefreshing = true;
					}
					setTimeout(e => {
						that.isRefreshing = false;
					}, 500)
				}
			},
			setTotal(data) {
				this.totalValue = data
			},
			showMask(data) {
				this.mask = data
			},
			jump(path, params) {
				this.$Router.push({
					path: path,
					params: params
				})
			}
		},
		computed: {
			...mapState({
				customBar: state => state.init.customBar,
			}),
			gameStatus() {
				return this.$store.state.common.dayGameStatus
			},
			result_pop() {
				return uni.getStorageSync('result_pop')
			}
		},
		onLoad() {
			const that = this
			uni.$on('closeResultPop', function() {
				uni.setStorageSync('result_time', this.$tools.timestamp_symbol(new Date(), ''))
				uni.setStorageSync('result_pop', false)
				that.resultPop = false
			})
			let team_id = Boolean(uni.getStorageSync('team_id'));
			let daygame_stage = Boolean(uni.getStorageSync('daygame_stage'));
			let token = Boolean(uni.getStorageSync('token'))
			this.getDayGameStatus().then(res => {
				this.resulteData = res.game_pop
				this.resultPop = res.game_pop.pop
				uni.setStorageSync('result_pop',true)
			})
			if (team_id && daygame_stage && token) {
				this.backUrl = "/pages/index/nodegame"
				this.joinTeam().then(res => {
					if (res.code == 1) {
						this.joinText=res.msg
						this.joinSuccess=true
						this.show=true
						this.joinSuccess=true
						this.getDayGameStatus()
					} else {
						this.joinText=res.msg
						this.joinSuccess=false
						this.show=true
					}
				}).catch(err => {
					this.joinText=err.msg
					this.joinSuccess=false
					this.show=true
				})
				uni.removeStorageSync('team_id')
				uni.removeStorageSync('daygame_stage')
			}
		},
		created() {

		}
	}
</script>

<style lang="scss" scoped>
	.races {
		width: 100vw;
		height: 100vh;
		background-color: #622128;
	}

	.head_box {}

	.scroll_wrap {
		overflow: hidden;
	}



	.page {
		width: 100%;
		background-color: #622128;

	}

	.nav-bg {
		position: relative;
		width: 750rpx;
		height: 698rpx;
		background-image: url(#{$IMG_URL}/jsbg.jpg);

		.nav-text {
			margin-top: auto;

			.text1 {
				font-size: 46rpx;
				font-family: Source Han Serif CN;
				color: #581E24;
				line-height: 35px;
				text-shadow: 0px 2rpx 2rpx rgba(94, 10, 18, 0.24);

				background: linear-gradient(1deg, #FFDEC3 10%, #fff1e9 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.text2 {
				width: 625rpx;
				height: 72rpx;
				background-image: url(../../../static/imgs/images/jswzbg.png);
				font-weight: 400;
				color: #E3AB6E;
			}

			.text3 {
				padding: 0 20rpx;
				border-radius: 50rpx;
				height: 50rpx;
				background-color: rgba($color: #000000, $alpha: 0.2);
			}
		}

	}

	.node_items {
		margin-top: -100rpx;
		width: 100%;

		.item {
			font-family: Source Han Serif CN;
			width: 157rpx;
			height: 209rpx;
			border-radius: 20rpx;
			background: rgba($color: #FFFFFF, $alpha:0.05);

			.num {
				color: #E3AB6E;
				text-shadow: 0px 2rpx 2rpx rgba(94, 10, 18, 0.24);

				background: linear-gradient(1deg, #FFDEC3 10%, #FFF1E9 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.active-num {
				color: #90363F;
			}
		}

		.active-bg {
			color: #90363F;
			background: linear-gradient(1deg, #FFDEC3 5%, #FFF1E9 100%) !important;
		}
	}

	.button {
		margin-top: 40rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(270deg, #E8B58E, #F7D9AA);
		box-shadow: 0px 3rpx 1rpx 0rpx #580F17;
		border-radius: 50rpx;
		color: #622128;
	}

	.about-race {
		padding: 126rpx 50rpx 50rpx 50rpx;
		width: 690rpx;
		height: 828rpx;
		background: #53181E;
		border: 1rpx solid rgba($color: #E3AB6E, $alpha: 0.5);
		border-radius: 20rpx;
		margin-top: 96rpx;
		position: relative;

		.title {
			position: absolute;
			left: 50%;
			top: -20rpx;
			transform: translateX(-50%);
			width: 488rpx;
			height: 86rpx;
			background-image: url(#{$IMG_URL}/jsbtbg.png);
			border-radius: 10rpx;
			font-family: Source Han Serif CN;
			color: #E3AB6E;
		}

		.content {
			color: #EEDCC9;
			line-height: 44rpx;
			text-align: justify;
		}
	}

	.bottom {
		font-family: Source Han Serif CN;
		color: #E3AB6E;
		margin: 60rpx 0;
	}

	.nav-title {
		color: #FFFFFF;
	}
</style>
